/**
 * WebSocket客户端示例
 * 用于连接到服务器并接收随机数据
 */

// 创建WebSocket连接
function connectWebSocket() {
    // 确定WebSocket URL (使用当前页面的主机名和协议)
    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
    const wsUrl = `${protocol}//${window.location.host}`;

    const ws = new WebSocket(wsUrl);

    // 连接打开时的处理
    ws.onopen = function () {
        console.log('已连接到WebSocket服务器');
        updateStatus('已连接', 'connected');
    };

    // 接收到消息时的处理
    ws.onmessage = function (event) {
        try {
            const data = JSON.parse(event.data);
            console.log('收到数据:', data);

            // 根据消息类型处理数据
            switch (data.type) {
                case 'welcome':
                    addMessage(`服务器: ${data.message}`);
                    break;

                case 'random':
                    addRandomNumber(data.value, data.integer);
                    break;

                case 'randomBatch':
                    if (data.values && Array.isArray(data.values)) {
                        data.values.forEach(value => addRandomNumber(value));
                    }
                    break;

                default:
                    addMessage(`收到未知类型数据: ${JSON.stringify(data)}`);
            }
        } catch (error) {
            console.error('处理消息时出错:', error);
            addMessage(`错误: ${error.message}`);
        }
    };

    // 连接关闭时的处理
    ws.onclose = function () {
        console.log('WebSocket连接已关闭');
        updateStatus('已断开', 'disconnected');

        // 5秒后尝试重新连接
        setTimeout(() => {
            updateStatus('正在重连...', 'reconnecting');
            connectWebSocket();
        }, 5000);
    };

    // 发生错误时的处理
    ws.onerror = function (error) {
        console.error('WebSocket错误:', error);
        updateStatus('连接错误', 'error');
    };

    // 请求一批随机数
    window.requestRandomNumbers = function (count = 10) {
        if (ws.readyState === WebSocket.OPEN) {
            ws.send(JSON.stringify({
                action: 'getRandomNumbers',
                count: count
            }));
        } else {
            addMessage('WebSocket未连接，无法发送请求');
        }
    };

    return ws;
}

// 更新连接状态显示
function updateStatus(message, className) {
    const statusElement = document.getElementById('connection-status');
    if (statusElement) {
        statusElement.textContent = message;
        statusElement.className = className;
    }
}

// 添加随机数到页面
function addRandomNumber(value, integer = null) {
    const container = document.getElementById('random-numbers');
    if (container) {
        const numberElement = document.createElement('div');
        numberElement.className = 'random-number';

        if (integer !== null) {
            numberElement.textContent = `随机数: ${value.toFixed(4)} (整数: ${integer})`;
        } else {
            numberElement.textContent = `随机数: ${value.toFixed(4)}`;
        }

        container.prepend(numberElement);

        // 限制显示的数量，防止页面过长
        if (container.children.length > 100) {
            container.removeChild(container.lastChild);
        }
    }
}

// 添加消息到页面
function addMessage(message) {
    const container = document.getElementById('messages');
    if (container) {
        const messageElement = document.createElement('div');
        messageElement.className = 'message';
        messageElement.textContent = message;

        container.prepend(messageElement);

        // 限制显示的消息数量
        if (container.children.length > 50) {
            container.removeChild(container.lastChild);
        }
    }
}

// 页面加载完成后连接WebSocket
document.addEventListener('DOMContentLoaded', function () {
    // 连接WebSocket
    const ws = connectWebSocket();

    // 设置请求随机数按钮事件
    const requestButton = document.getElementById('request-random');
    if (requestButton) {
        requestButton.addEventListener('click', function () {
            const countInput = document.getElementById('random-count');
            const count = countInput ? parseInt(countInput.value, 10) || 10 : 10;
            requestRandomNumbers(count);
        });
    }
}); 